<template>
  <div>
    <div class="header">
      <v-drawerHeader :title="title"></v-drawerHeader>
    </div>
    <div class="body">
      <el-button type="primary" @click="onSelectUser" size="small">添加用户</el-button>
      <el-button type="danger" @click="onClearUser" size="small">清空用户</el-button>
      <el-table
        :data="tableData"
        style="width: 100%"
        row-key="id"
        stripe>
        <el-table-column
          prop="code"
          label="人员编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="nameZh"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="deptName"
          label="部门"
          width="180">
        </el-table-column>
        <el-table-column
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-button @click="onDelete(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <v-pagination :pageData.sync="pageData" @refreshPageData="refreshPageData"></v-pagination>
    </div>
    <el-dialog
      title="选择用户"
      :visible.sync="dialogVisible"
      width="40%" :modal="false">
      <span>
        <v-selectUser :randomKey.sync="randomKey" :checkedUser.sync="checkedUser"></v-selectUser>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doSelectUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/api'
import drawerHeader from '@/views/public/drawerHeader.vue'
import selectUser from '@/views/public/selectUserMultiple.vue'
import pagination from '@/views/public/pagination.vue'
import constant from '@/libs/util.constant'

export default {
  name: 'sys-role-rel-user',
  components: {
    'v-drawerHeader': drawerHeader,
    'v-selectUser': selectUser,
    'v-pagination': pagination
  },
  props: {
    // 角色id
    id: {
      type: Number
    },
    title: {
      type: String
    }
  },
  data () {
    return {
      tableData: [],
      pageData: {
        page: 1,
        size: 10,
        totalRows: 0
      },
      dialogVisible: false,
      checkedUser: {
        users: []
      },
      randomKey: 0
    }
  },
  mounted () {
    this.getById()
  },
  methods: {
    getById () {
      if (this.id === 0 || !this.id) {
        return
      }
      var param = { id: this.id }
      param.page = this.pageData.page
      param.size = this.pageData.size
      api.sysRole.sysfindUserByRoleId({}, param).then(res => {
        this.pageData.totalRows = res.totalRows
        this.tableData = res.content
      })
    },
    onDelete (row) {
      this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', constant.confirmMsg()).then(() => {
        var param = [row.id]
        api.sysRole.deleteUser(param).then(res => {
          this.$message({ type: 'info', message: '已删除' })
          this.refreshPageData()
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },
    onSelectUser () {
      this.dialogVisible = true
      this.randomKey = this.randomKey + 1
    },
    doSelectUser () {
      console.log(this.checkedUser)
      var userIds = []
      this.checkedUser.users.forEach(e => {
        userIds.push(e.id)
      })
      var param = {}
      param.roleId = this.id
      param.userIds = userIds
      api.sysRole.addUser(param).then(res => {
        this.$message({ type: 'info', message: '已添加' })
        this.dialogVisible = false
        this.refreshPageData()
      })
    },
    onClearUser () {
      this.$confirm('此操作将永久清空关联人员, 是否继续?', '提示', constant.confirmMsg()).then(() => {
        var param = { roleId: this.id }
        api.sysRole.clearUser(param).then(res => {
          this.$message({ type: 'info', message: '已清空' })
          this.refreshPageData()
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消清空' })
      })
    },
    refreshPageData () {
      this.getById()
    }
  },
  watch: {
    id () {
      this.getById()
    }
  }
}
</script>

<style lang="scss">
  .body {
    padding: 8px;
  }
</style>
